<template>
    <div class="container">

        <el-form :model="formData" ref="formContainer" :rules="rules">
            <el-form-item label="人员" prop="name">
                <el-input placeholder="请输入二维码对应人员名" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-upload ref="upload" :auto-upload="false" action="#" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
                    :before-upload="beforeUpload" :http-request="customUpload">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-button @click="submit">提交</el-button>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div class="container-lr" style="text-align: right;">
            <el-button @click="getTableData">刷新</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名字" width="100" align="center">

            </el-table-column>
            <el-table-column prop="url" label="图片地址" width="600" align="center">
                <template #default="scope">
                    <a @click="preView(scope.row)">{{ scope.row.url }}</a>
                </template>
            </el-table-column>
            <el-table-column prop="enable" label="状态" width="80" align="center">
                <template #default="scope">
                    {{scope.row.enable?'启用':'禁用'}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" type="primary" @click="disable(scope.$index, scope.row)">{{scope.row.enable?'禁用':'启用'}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl1" alt="">
        </el-dialog>
    </div>
</template>

<script>
import { request } from '@/api/request';
import { ossUpload } from '@/utils/oss.js'
import { uploadQrCode } from '@/api/user'


export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogImageUrl1: '',
            dialogVisible1: false,

            formData: {
                name: ''
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "名字必填",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        this.getTableData();
        // this.tableData = content.data.tableData;
    },
    methods: {
        submit() {
            this.$refs.formContainer.validate(valid => {
                if (!valid) return;
                this.$refs.upload.submit()
            })
        },
        getTableData() {
            // console.log('getTableData called');
            // request({
            //     url: '/weixin/qrcode/getRandom',
            //     method: 'GET',
            // }, "").then(res=>{
            //     console.log(res);
            // })
            request({
                url: '/weixin/qrcode/list',
                method: 'GET',
                params:{
                    page:this.currentPage,
                    size:this.pageSize
                }
            }, "").then(res => {
                this.total = res.total;
                this.currentPage = res.current
                this.pageSize = res.size
                this.tableData = res.records;
            })
        },
        // submitUpload() {
        //     console.log('submitUpload called');
        //     this.$refs.upload.submit();
        // },
        customUpload(options) {
            this.$refs.formContainer.validate((v) => {
                if (!v) return;
                // console.log(v)

                // console.log(111111111111)
                // return


                let url = null;
                ossUpload('cdn', options.file.name, options.file, (process) => {
                    // console.log('=======' + process)
                }, (client) => {

                    // url = this.$store.state.systemImageConfig[0].imagesHost + client.options.path
                    url = client.options.path
                }).then(_ => {
                    // 入库
                    uploadQrCode('/weixin/qrcode/upload', {
                        name: this.formData.name,
                        url
                    }, '').then(_ => {
                        this.$message.success('上传成功!');
                        this.getTableData()
                    }).catch(_ => {
                        console.log(_)
                        this.$message.error('上传失败!');
                    })
                }).catch(_ => {
                    console.log(_)
                    this.$message.error('上传失败!');
                })
            })


        },
        handleRemove(file, fileList) {
            // console.log('handleRemove called', file, fileList);
        },
        handlePictureCardPreview(file) {
            // console.log('handlePictureCardPreview called', file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            // console.log('handleSuccess called', response, file, fileList);
            // 这个方法在自定义上传时不需要，因为 customUpload 已经处理了上传成功逻辑
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleDelete(index, row) {
            // https://yun-question.oss-cn-beijing.aliyuncs.com/middle/huikao/weixin/qrcode/1792832605416001536.png

            request({
                url: '/weixin/qrcode/delete/' + row.id,
                method: 'DELETE',
            }, "删除失败啦").then(res => {
                if(index==0&&this.currentPage>1){
                    this.currentPage--
                }
                // console.log(res);
                this.getTableData()
                this.$message.success('删除成功!');
            })
        },
        disable(index, row){
            request({
                url: '/weixin/qrcode/disable/' + row.id,
                method: 'DELETE',
            }, "操作失败啦").then(res => {


                this.getTableData()
                this.$message.success('操作成功!');
            })
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.getTableData();
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage;
            this.getTableData();
        },
        preView(row) {
            // :href="'https://yun-question.oss-cn-beijing.aliyuncs.com/'+scope.row.url" target="_blank"
            // request({
            //     url: '/weixin/qrcode/getUrl?id=' + row.id,
            //     method: 'GET',
            // }, "获取失败").then(res => {
            //     this.dialogVisible1 = true;
            //     this.dialogImageUrl1 = res

            // })
            this.dialogImageUrl1=this.$store.state.systemImageConfig[0].imagesHost +row.url
            this.dialogVisible1 = true;

        }
    }
};
</script>

<style scoped>
/* 添加一些样式 */
.container {
    padding: 16px;
}

.container-lr {
    padding: 16px 0;
}
</style>
